<template>
	<view>
		<view class="nav-bar">
			<uni-nav-bar title="护士上门" backgroundColor="transparent" :shadow="false" :border="false" :statusBar="true"
				color="white">
			</uni-nav-bar>
		</view>
		<view class="tab-card">

			<view class="card-item">
				<view class="left-col">
					<image src="../../static/home_icon_income.png" class="icon"></image>
					<view class="title">总收入</view>
					<view class="value">{{dateTotalInfo.totalRevenue}}</view>
				</view>
				<image src="../../static/home_ipic_income.png" class="right-icon-bg"></image>
			</view>
			<view class="card-item">
				<view class="left-col">
					<image src="../../static/home_icon_order.png" class="icon"></image>
					<view class="title">总订单</view>
					<view class="num">{{dateTotalInfo.totalOrderNum}}</view>
				</view>
				<image src="../../static/home_ipic_order.png" class="right-icon-bg"></image>
			</view>

		</view>

		<view class="statistics-view">
			<view class="item">
				<view class="name">今日收入</view>
				<view class="value">{{dateTotalInfo.todaysIncome}}</view>
			</view>
			<view class="div-line" />
			<view class="item">
				<view class="name">今日订单</view>
				<view class="value">{{dateTotalInfo.thatTimeOrderNum}}</view>
			</view>
			<view class="div-line" />
			<view class="item">
				<view class="name">退单总数</view>
			<view class="value">{{dateTotalInfo.refund}}</view>
			</view>
		</view>

		<view class="card-view" @click="navToDetails()">
			<view class="title-view">
				<view class="left">
					<view class="title">待处理订单</view>
					<uni-badge :text="pendingOrderInfoTotal"></uni-badge>
				</view>
				<uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
			</view>
			<view class="card-body order-card-body" v-if="!isPendingOrderInfoEmpty">
				<view class="info-row">
					<view class="title">联系人</view>
					<view class="right value">{{pendingOrderInfo.contactName}}</view>
				</view>
				<view class="info-row">
					<view class="title">联系电话</view>
					<view class="right phone">{{pendingOrderInfo.contactPhone}}</view>
				</view>
				<view class="info-row">
					<view class="title">服务项目</view>
					<view class="right value">{{pendingOrderInfoServiceItem}}</view>
				</view>
				<view class="info-row">
					<view class="title">预约时间</view>
					<view class="right value">{{pendingOrderInfo.orderTime}}</view>
				</view>
				<view class="info-row">
					<view class="title">上门地址</view>
					<view class="right value singe-line-ellipsis">{{pendingOrderInfo.visitorAddress}}</view>
				</view>
				<view class="info-row">
					<view class="title">订单金额</view>
					<view class="right money">¥{{pendingOrderInfo.orderAmount}}</view>
				</view>
				<view class="info-row">
					<view class="title">下单时间</view>
					<view class="right value">{{pendingOrderInfo.createTime}}</view>
				</view>
			</view>
			<view class="card-body order-card-body" v-else>
				<view class="card-empty">暂无待处理订单</view>
			</view>
		</view>

		<view class="card-view">
			<view class="title-view">
				<view class="left">
					<view class="title">服务项目TOP5</view>
				</view>
				<uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
			</view>
			<view class="card-body">
				<view style="width: 100%;margin-top: 20rpx;">
					<canvas style="height: 400rpx;width: 100%;" canvas-id="myid" id="myid" />
				</view>
			</view>
		</view>

		<view class="card-view" style="margin-bottom: 20rpx;">
			<view class="title-view">
				<view class="left">
					<view class="title">护士排行</view>
				</view>
				<uni-icons type="right" color="rgba(186, 189, 196,0.6)"></uni-icons>
			</view>
			<view class="card-body ranking-of-nurses-card-body">
				<view class="tab-view">
					<view @click="tabClick(item,index)" class="tab-item"
						:class="rankingTabCurrent === index ? 'tab-item-selected' : ''" v-for="(item,index) in rankingTabList">
						{{item}}
					</view>
				</view>
				<view v-for="(item,index) in order" class="item-row" v-if="rankingTabCurrent === 1">
						<view class="index" :class="index >= 3 ? 'last-index': ''">{{index + 1}}</view>
					 		<image src="../../static/logo.png" class="avatar"></image>
					<view class="name">{{item.value}}</view>
					<view class="value">{{item.count}}</view>
				</view>
				
                <view v-for="(item,index) in rating" class="item-row" v-if="rankingTabCurrent === 0">
						<view class="index" :class="index >= 3 ? 'last-index': ''">{{index + 1}}</view>
					 		<image src="../../static/logo.png" class="avatar"></image>
					<view class="name">{{item.value}}</view>
					<view class="value">{{item.count}}</view>
				</view>
				
				<view v-for="(item,index) in income" class="item-row" v-if="rankingTabCurrent === 2">
						<view class="index" :class="index >= 3 ? 'last-index': ''">{{index + 1}}</view>
					 		<image src="../../static/logo.png" class="avatar"></image>
					<view class="name">{{item.value}}</view>
					<view class="value">{{item.count}}</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	import * as loginUtils from '../../utils/loginUtils.js'
	import uCharts from '../../components/u-charts/u-charts.js';
	import * as homePage from '../../common/api/homePage.js'
	import * as orderInfo from '../../common/api/orderInfo.js'
	export default {
		data() {
			return {
				cWidth: 600,
				cHeight: 400,
				uChartsInstance: null,
				rankingTabList: ['好评率', '订单量', '营收额'],
				rankingTabCurrent: 1,
				dateTotalInfo: {},
				order: {},
				rating: {},
				income: {},
				pendingOrderInfo: {},
				pendingOrderInfoTotal: 0,
			}
		},
		onReady() {

		},
		mounted() {
			loginUtils.checkLogin()
			this.cWidth = uni.upx2px(600)
			this.cHeight = uni.upx2px(400)
			this.getServerData()
			this.hospitalDataReport()
			this.getPendingOrderInfo()
		},
		computed: {
			isPendingOrderInfoEmpty() {
				return this.pendingOrderInfoTotal === 0
			},
			pendingOrderInfoServiceItem() {
				if (!this.pendingOrderInfo) {
					return ''
				}
				if (!this.pendingOrderInfo.itemInfos) {
					return ''
				}
				return this.pendingOrderInfo
					.itemInfos
					.map(e => e.serviceItem)
					.join('/')
			}
		},
		methods: {
			getServerData() {
				setTimeout(() => {
					// const res = {
					// 	series: [{
					// 			name: '雾化吸入',
					// 			data: 20,
					// 		},
					// 		{
					// 			name: '心肺复苏指导',
					// 			data: 5
					// 		},
					// 		{
					// 			name: '胰岛素注射',
					// 			data: 0
					// 		},
					// 		{
					// 			name: '鼻饲管',
					// 			data: 10
					// 		},
					// 		{
					// 			name: '其他',
					// 			data: 3
					// 		}
					// 	]
					// };
					const dataJson = uni.getStorageSync('user_info') || '{}'
					const data = JSON.parse(dataJson) || {}
					const param = {
						hospitalId: data.hospitalUid
				
					}
					homePage.hospitalTreeDiagram(param).then(result => {
						// this.dateTotalInfo = result.data.data
						this.drawCharts('myid', result.data.data);
					}).catch(error => {
						console.log(error);
					})
					// this.drawCharts('myid', res);
				}, 500);
			},
			drawCharts(id, data) {
				console.log("data",data);
				const ctx = uni.createCanvasContext(id, this);
				this.uChartsInstance = new uCharts({
					type: "ring",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					series: data,
					legend: {
						show: true,
						position: 'right',
						lineHeight: 30
					},
					animation: true,
					padding: [0, 0, 0, 0],
					dataLabel: true,
					extra: {
						tooltip: {
							show: true,
						},
						ring: {
							labelWidth: -20,
						}
					}
				});
			},
			tabClick(item, index) {
				this.rankingTabCurrent = index
			},
			hospitalDataReport() {
				const dataJson = uni.getStorageSync('user_info') || '{}'
				const data = JSON.parse(dataJson) || {}
				const param = {
					hospitalId: data.hospitalUid

				}
				homePage.hospitalDataReport(param).then(result => {
					this.dateTotalInfo = result.data.data
				}).catch(error => {
					console.log(error);
				})
				
				homePage.hospitalTypeHospital(param).then(result => {
					console.log("当前订单",result.data.data.order);
					this.order = result.data.data.order
					this.rating = result.data.data.rating
					this.income = result.data.data.income
				}).catch(error => {
					console.log(error);
				})
			},
			getPendingOrderInfo() {
				const dataJson = uni.getStorageSync('user_info') || '{}'
				const data = JSON.parse(dataJson) || {}
				const param = {
					pageIndex: 1,
					pageSize: 1,
					hospitalUid: data.hospitalUid,
					statusList: ['待评估', '待派发', ]
				}
				orderInfo.queryByPage(param).then(result => {
					const list = result.data.data.rows || []
					this.pendingOrderInfoTotal = result.data.data.total
					this.pendingOrderInfo = list[0] || {}
				}).catch(error => {
					console.log(error);
				})
			},
			navToDetails() {
				if (this.isPendingOrderInfoEmpty) {
					return
				}
				uni.navigateTo({
					url: '/pages/orderDetails/orderDetails?uid=' + this.pendingOrderInfo.uid
				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar {
		height: 500rpx;
		background: linear-gradient(to left bottom, rgba(46, 176, 217, 1), rgba(86, 213, 253, 0));
	}

	.tab-card {
		display: flex;
		margin-left: 20rpx;
		margin-right: 20rpx;
		margin-top: -300rpx;

		.card-item {
			width: 100%;
			height: 230rpx;
			background: white;
			border-radius: 28rpx;
			margin-left: 10rpx;
			margin-right: 10rpx;
			position: relative;

			.right-icon-bg {
				position: absolute;
				width: 148rpx;
				height: 148rpx;
				right: 10rpx;
				bottom: 5rpx;
			}

			.left-col {
				display: flex;
				flex-direction: column;
				justify-content: center;
				height: 100%;
				margin-left: 30rpx;
				z-index: 1;
				position: absolute;

				.icon {
					width: 48rpx;
					height: 48rpx;
				}

				.title {
					font-size: 26rpx;
					color: rgba(35, 35, 35, 0.5);
					margin-top: 5rpx;
				}

				.num {
					font-size: 48rpx;
					font-weight: bold;
					color: #232323;
				}
			}

		}
	}


	.statistics-view {
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		background: white;
		border-radius: 28rpx;
		margin-top: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		height: 154rpx;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.name {
				color: rgba(35, 35, 35, 0.5);
				font-size: 26rpx;
			}

			.value {
				font-size: 34rpx;
				color: rgba(35, 35, 35, 0.9);
				font-weight: bold;
			}
		}

		.div-line {
			height: 100%;
			width: 2rpx;
			background: #EBEBEB;
		}
	}

	.card-view {
		margin-left: 30rpx;
		margin-right: 30rpx;
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 24rpx;

		.title-view {
			display: flex;
			align-items: center;

			.left {
				flex: 1;
				display: flex;
				align-items: center;

				.title {
					font-size: 34rpx;
					color: #000;
					font-weight: bold;
				}

			}
		}

		.card-body {}
	}

	.card-empty {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #232323;
	}

	.order-card-body {
		display: flex;
		flex-direction: column;
		margin-top: 10rpx;

		.info-row {
			display: flex;
			min-height: 60rpx;
			align-items: center;
			justify-content: center;

			.title {
				width: 150rpx;
				color: rgba(35, 35, 35, 0.7);
				font-size: 26rpx;
			}

			.right {
				flex: 1;
			}

			.value {
				font-size: 26rpx;
				color: #232323;
			}

			.phone {
				color: #2EB0D9;
				font-size: 30rpx;
			}

			.money {
				color: #EE5A2C;
				font-size: 30rpx;
				font-weight: bold;
			}

		}

	}

	.ranking-of-nurses-card-body {
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 20rpx;

		.tab-view {
			width: 100%;
			height: 64rpx;
			background: #F8F8F8;
			border-radius: 40rpx;
			display: flex;
			align-items: center;
			padding: 4rpx;
			box-sizing: border-box;

			.tab-item {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: rgba(35, 35, 35, 0.5);
				font-size: 26rpx;
				border-radius: 40rpx;
				font-weight: bold;
			}

			.tab-item-selected {
				background: #FFFFFF;
				color: #2EB0D9;
			}
		}

		.item-row {
			width: 100%;
			display: flex;
			align-items: center;
			margin-top: 40rpx;

			.index {
				color: #F5803D;
				font-size: 40rpx;
				font-weight: bold;
			}

			.last-index {
				color: #232323;
			}

			.avatar {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-left: 30rpx;
			}

			.name {
				color: #232323;
				font-size: 30rpx;
				font-weight: bold;
				flex: 1;
				margin-left: 24rpx;
			}

			.value {
				color: #232323;
				font-weight: bold;
				font-size: 32rpx;
			}
		}
	}
</style>